
<template>
  <div class="fault-list" ref="faultList">
    <el-card style="min-width: 300px">
      <template #header>
        <div class="card-header">
          <span>故障列表</span>
        </div>
      </template>
      <ul>
        <li
          v-for="car in carData"
          @click="showDetails(car)"
          :class="car.isNoClick ? 'disabled' : ''"
        >
          <div>
            <span>{{ car.id }}</span>
            <el-button type="primary" plain size="small" disabled
              >{{ car. faultState}}</el-button
            >
          </div>
          <div>
            <span>{{ car.investDate }}</span>
            <el-icon color="red"><LocationInformation /></el-icon>
          </div>
        </li>
      </ul>
    </el-card>
  </div>
  <FaultDetial v-if="isShowDetial" @closeDetail="closeDetail" :selectCar="selectCar"></FaultDetial>
</template>
<script setup>
import { onMounted, ref,watch } from "vue";
import { LocationInformation } from "@element-plus/icons-vue";
import FaultDetial from "@/components/FaultDetial.vue";
import {usePostStore} from '@/stores'
import { getCars } from "@/api/api";
import {storeToRefs} from 'pinia';
const postStore = usePostStore();
const {updateRefreshFaultList} = postStore;
const {isRefreshFaultList} = storeToRefs(postStore);
const faultList = ref(null);
const carData = ref([]);
//是否显示故障详情
const isShowDetial = ref(false);
//当前选中的故障车
let selectCar = ref(null);
//当点击其中一个后所有的li元素不可点击
onMounted(async () => {
  faultList.value.style.top = window.innerHeight * 0.07 + "px";
  await getCarOfFault();
});
const getCarOfFault = async()=>{
  const cars = await getCars({ state: "故障" });
  cars.forEach((car) => {
    car.isNoClick=false;
  });
  carData.value = cars;
}
//监听是否要重新渲染故障列表
watch(isRefreshFaultList,async()=>{
    if(isRefreshFaultList.value){
      getCarOfFault();
      updateRefreshFaultList(false);
    }
})
//显示故障详情列表
const showDetails = (car) => {
    selectCar.value = car;
    carData.value.forEach(carItem=>{
        if(car != carItem){
            carItem.isNoClick = true;
        }
    });
    if(!isShowDetial.value){
        isShowDetial.value = true;
    }
};
//关闭信息弹窗的事件
const closeDetail = ()=>{
    carData.value.forEach(car=>{
        car.isNoClick = false;
    })
    isShowDetial.value = false;
    //重新刷新列表
    getCarOfFault();
}
</script>
<style scoped>
.fault-list {
  position: absolute;
  left: 40px;
  z-index: 10;
  height: 300px;
  overflow-y: scroll;
}
.fault-list .card-header span {
  font-weight: 600;
}
.fault-list ul li {
  margin-bottom: 10px;
  border-bottom: 2px dashed var(--el-border-color);
}
.fault-list ul li div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.fault-list ul li div:hover {
  cursor: pointer;
}
.fault-list ul li div:first-child span {
  color: #0499fd;
}
.fault-list ul li div:last-child span {
  font-size: 14px;
}
.disabled {
  pointer-events: none;
}
</style>
